<template>
  <div class="box">
    <div class="top">
      <p><i class="el-icon-menu"></i>上货</p>
      <hr />
    </div>
    <div class="center">
      <div class="center-top">
        <p>条码</p>
        <el-input
          placeholder="请扫描商品条码"
          v-model="input"
          :disabled="disabled"
          @keyup.native="inputNum"
        >
        </el-input>
        <el-checkbox v-model="checked" @change="changeInput"
          >手动输入条形码</el-checkbox
        >
        <el-button
          type="primary"
          class="chaxun"
          @click="chaxun"
          :disabled="chaxunDisabled"
          >查询</el-button
        >
        <!-- <div class="excelBox"><p>导入excel文件</p></div> -->
        <Uploads @fn="onFn" />
      </div>
      <div class="center-bot">
        <el-table :data="tableData" border style="width: 660px">
          <el-table-column
            prop="serial_Number"
            label="流水号"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="barcode"
            label="条码"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="goods_Name"
            label="商品名称"
            width="140"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="unit" label="单位" width="65" align="center">
          </el-table-column>
          <el-table-column
            label="上货数量"
            prop="type"
            width="110"
            align="center"
          >
            <template slot-scope="scope">
              <input
                type="number"
                placeholder="1"
                class="shuliang"
                @change="changenum(scope)"
                v-model="scope.row.type"
                @input="
                  scope.row.type = Number(
                    $event.target.value.replace(/\D+/, '')
                  )
                "
              />
            </template>
          </el-table-column>
        </el-table>
        <div class="fengye">
          <el-pagination
            :page-size="table.pagesize"
            layout="prev, pager, next"
            :total="table.total"
            :current-page="table.page"
            @current-change="changePage"
          >
          </el-pagination>
        </div>
      </div>
      <div class="queding">
        <el-button type="primary" @click="shanghuo">确定</el-button>
      </div>
      <el-dialog
        title="提示"
        :visible.sync="dialogShanghuo"
        width="30%"
        :before-close="handleClose"
      >
        <span>上货成功</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogShanghuo = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="quedingShanghuo">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="查询结果"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <p>
            商品货号：<span>{{ goods.barcode }}</span>
          </p>
          <p>
            商品名称：<span>{{ goods.goods_Name }}</span>
          </p>
          <p>
            商品价格：<span>{{ goods.persent_Price }}</span
            >元/<span>{{ goods.unit }}</span>
          </p>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="addPurchase">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import Uploads from "../../components/shanghuo/Uploads.vue";
export default {
  name: "ShangHuo",
  components: {
    Uploads,
  },
  data() {
    return {
      excelData: [],
      input: "",
      table: {
        pagesize: 5,
        total: 0,
        page: 1,
      },
      goods: {},
      disabled: false,
      checked: "false",
      dialogVisible: false,
      dialogShanghuo: false,
      chaxunDisabled: true,
      pagecount: "5",
      pagesize: "20",
      data: [],
    };
  },
  methods: {
    changeInput() {
      if (this.checked) {
        this.disabled = false;
        this.chaxunDisabled = false;
      } else {
        this.chaxunDisabled = true;
      }
    },
    onFn(v) {
      this.data = v;
      // this.table.total = this.data.length;
    },
    addPurchase() {
      this.dialogVisible = false;
      if (this.data == "") {
        this.data.push(this.goods);
      } else {
        for (var i = 0; i < this.data.length; i++) {
          //查询货号是否存在，存在就把对应物品数量加1
          if (this.goods.barcode == this.data[i].barcode) {
            console.log("相同", this.goods.barcode, this.data);
            var goods1 = this.data[i];
            goods1.type += 1;

            this.data.splice(i, 1, goods1);
            break;
          } else {
            if (i == this.data.length - 1) {
              this.data.push(this.goods);
              break;
            }
          }
        }
      }

      this.tabelData = this.data.slice(
        (this.table.page - 1) * this.table.pagesize,
        this.table.page * this.table.pagesize
      );
      this.table.total = this.data.length;
      console.log(this.data.length);
      this.table.pagecount = this.table.total;
    },
    changePage(res) {
      console.log(res);
      this.table.page = res;
      this.tabelData = this.data.slice(
        (this.table.page - 1) * this.table.pagesize,
        this.table.page * this.table.pagesize
      );
    },
    handleClose() {},
    quedingShanghuo() {
      this.dialogShanghuo = false;
    },
    changenum(e) {
      if (e.row.type <= 0) {
        this.data.splice([e.$index], 1);
        this.table.total = this.data.length;
      } else if (e.value < 10) {
        //库存数量
      }
    },
    shanghuo() {
      this.tabelData = this.tabelData.map((item) => {
        item.barcode = item.barcode.toString();
        item.serial_Number = item.serial_Number.toString();
        item.number = item.type.toString();
        return item;
      });
      this.$axios({
        url: "/exhibit/confirm",
        method: "post",
        data: {
          data: this.tabelData,
        },
      }).then((res) => {
        console.log(res.data[0].code);
        if (res.data[0].code == 200) {
          this.dialogShanghuo = true;
          this.data = [];
          this.table.total = this.data.length;
        }
      });
    },
    chaxun() {
      this.$axios({
        url: "/exhibit/goods",
        method: "post",
        data: {
          barCode: this.input,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.goods = res.data.data[0];
          this.dialogVisible = true;
          this.goods.type = 1;

          this.goods.serial_number += this.tableData.length;
        }
        if (res.data.code == 501) {
          alert(res.data.msg);
        }
      });
    },
    inputNum() {
      console.log(this.checked);
      if (!this.checked) {
        console.log("键盘输入", this.checked);
        this.input = "";
        if (this.input != "") {
          this.$axios({
            url: "/counter/scanning",
            method: "post",
            data: {
              barCode: this.input,
            },
          }).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              console.log(res.data.data[0]);
              this.goods = res.data.data[0];
              this.serial_number = res.data.data[1][0].serial_number;
              this.dialogVisible = true;
              this.goods.num = 1;
              if (this.goods.discount_rate != "") {
                //打折的情况
                this.goods.amount =
                  this.goods.persent_price * this.goods.discount_rate;
              } else {
                this.goods.amount = this.goods.persent_price;
                console.log(this.goods.amount);
              }
              this.addPurchase();
            }
          });
        }
      }
    },
  },
  computed: {
    tableData: {
      get() {
        return this.data.slice(
          (this.table.page - 1) * this.table.pagesize,
          this.table.page * this.table.pagesize
        );
      },
      set() {},
    },
  },

  mounted() {
    this.checked = false;
  },
};
</script>
<style scoped>
.top {
  font-size: 17px;
  line-height: 25px;
}
.top i {
  font-size: 25px;
  margin-right: 7px;
}
.box {
  margin-left: 20px;
  margin-right: 50px;
  width: 100%;
  height: 100%;
}
.center {
  width: 92%;
  height: 88%;
  margin-top: 20px;
  border-radius: 20px;
  padding-left: 70px;
  background-color: white;
  position: relative;
}
.el-input {
  width: 200px;
  margin-right: 20px;
}
.center-top {
  width: 100%;
  display: flex;
  align-items: center;
  padding-top: 30px;
}
.center-top p,
.center-top el-input,
.el-checkbox {
  margin-right: 20px;
}
.center-top p {
  padding-top: 10px;
}

.el-table {
  margin-top: 20px;
}
.td {
  text-align: center;
}
.fengye {
  width: 60%;
  padding-top: 15px;
}
.el-pagination {
  display: inline;
  float: right;
}
.queding {
  position: absolute;
  right: 10%;
  top: 40%;
}
.el-button {
  background-color: blueviolet;
  width: 150px;
}
.shuliang {
  width: 70px;
  height: 26px;
  border: 0;
  text-align: center;
}
input[type="number"]::before {
  border: 1px solid #d9d9d9;
  border-radius: 5px;
}
.chaxun {
  width: 80px;
  margin-left: 20px;
}
</style>
